<!--
	描述：通用的键值对录入方式弹窗
-->
<template>
  <dialogBody @confirm="confirm" @cancel="cancel" ref="body">
    <template slot="title">
      {{title}}
    </template>
    <div class="userInfosAndRoles">
      <div class="userInfosForm">
        <div class="formContainer">
          <label><span class="required">*</span>用户名称</label>
          <input type="text" v-model.trim="userData.username" />
        </div>
        <div class="formContainer">
          <label><span class="required">*</span>登&nbsp;&nbsp;录&nbsp;&nbsp;名</label>
          <input type="text" v-model.trim="userData.usercode" />
        </div>
        <div class="formContainer">
          <label><span class="required">*</span>密&#x3000;&#x3000;码</label>
          <input type="password" v-model="userData.password" />
        </div>
        <div class="formContainer">
          <label><span class="required">*</span>多点登录</label>
          <span class="radio" :class="{'radioSelected':userData.isSSO == 0}" @click="userData.isSSO = 0"><span
              class="radioIcon"><span></span></span><span>否</span></span>
          <span class="radio" :class="{'radioSelected':userData.isSSO == 1}" @click="userData.isSSO = 1"><span
              class="radioIcon"><span></span></span><span>是</span></span>
        </div>
        <div class="formContainer">
          <label><span class="required">*</span>令牌有效时间</label>
          <el-select v-model="userData.tokenTime" placeholder="请选择" size="mini" style="width: 162px;">
            <el-option label="1天" value="ONE"> </el-option>
            <el-option label="7天" value="SEVEN"> </el-option>
            <el-option label="30天" value="THIRTY"> </el-option>
            <el-option label="永久" value="PERPETUAL"> </el-option>
          </el-select>
        </div>
        <div class="formContainer">
          <label><span></span>手机号码</label>
          <input type="text" v-model.trim="userData.mobile" />
        </div>
        <div class="formContainer">
          <label><span></span>座机号码</label>
          <input type="text" v-model.trim="userData.telephone" />
        </div>
        <div class="formContainer">
          <label><span></span>邮箱地址</label>
          <input type="email" v-model="userData.emailaddress" />
        </div>
        <div class="formContainer">
          <label><span></span>邮箱密码</label>
          <input type="password" v-model.trim="userData.emailpsw" />
        </div>
        <div class="formContainer">
          <label><span></span>备&#x3000;&#x3000;注</label>
          <textarea v-model="userData.memo"></textarea>
        </div>
      </div>
      <roleList ref="roleList" :functionType="1"></roleList>
    </div>
  </dialogBody>
</template>

<script>
  import dialogBody from '@/components/module/dialog/dialogBody.vue'
  import roleList from '@/page/userManager/roleList.vue'
  export default {
    components: {
      dialogBody,
      roleList
    },
    props: {

    },
    data () {
      return {
        title: '',
        callback: undefined,
        userData: {
          username: '',
          usercode: '',
          password: null,
          mobile: '',
          telephone: '',
          emailaddress: null,
          emailpsw: null,
          memo: '',
          entityid: '',
          isSSO: 0,
          tokenTime: ''
        },
      }
    },
    computed: {

    },
    watch: {},
    mounted () {},
    methods: {
      confirm () {
        if(!this.checkUserInfo()) {
          return
        }
        if(this.$refs.roleList.nowCheckedIds.length<1) {
          this.$dialogMethod.showMessage("每个用户必须绑定至少一个角色")
          return
        }
        if(this.callback!=undefined) {
          var roleIds=this.$refs.roleList.nowCheckedIds.join(',')
          this.callback(this.userData,roleIds)
        }
        this.close()
      },
      cancel () {
        this.close()
      },
      close () {
        this.$refs.body.hide()
      },
      open (title,callback) {
        this.title=title
        this.callback=callback
        this.$refs.body.open()
      },
      // 检查用户信息填写格式是否正确信息是否完整
      checkUserInfo () {
        let regemail=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!this.userData.username||this.userData.username==''||!this.userData.usercode||this.userData.usercode==''||!this.userData.password||this.userData.password=='' || this.userData.tokenTime == '') {
          this.$dialogMethod.showMessage('必填项不可为空')
          return false
        } else if(!!this.userData.emailaddress&&this.userData.emailaddress!=''&&this.userData.emailaddress!=null&&!regemail.test(this.userData.emailaddress)) {
          this.$dialogMethod.showMessage('请填写格式正确的邮箱地址')
          return false
        }
        return true
      }
    }
  }
</script>
<style scoped>
  .userInfosAndRoles {
    overflow: hidden;
  }

  .userInfosForm {
    float: left;
    margin-right: 50px;
    width: 275px;
  }

  .formContainer {
    margin-bottom: 12px;
  }

  .formContainer>label {
    display: inline-block;
    margin-right: 12px;
  }

  .formContainer>label>span {
    display: inline-block;
    width: 8px;
  }

  .required {
    color: red;
  }

  .formContainer>textarea {
    width: 170px;
    height: 80px;
    resize: none;
    vertical-align: top;
  }

  .radio {
    height: 32px;
    padding: 9px 0;
    margin-right: 20px;
    cursor: pointer;
  }

  .radioIcon {
    display: inline-block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: solid 1px #E4E4E4;
    margin-right: 6px;
    vertical-align: middle;
  }

  .radioIcon:hover {
    border-color: #409EFF;
  }

  .radioSelected>.radioIcon {
    background-color: #409EFF;
    border: none;
  }

  .pullBrakeSelected>.radioIcon {
    background-color: #409EFF;
    border: none;
  }

  .cardStateSelected>.radioIcon {
    background-color: #409EFF;
    border: none;
  }

  .radioIcon>span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #FFFFFF;
    margin: 5px;
  }
</style>